<template>
  <div>
    <div class="my">
      <div class="my-header">
        <div class="header-left">
          <img src="@/assets/img/head.jpg" alt="" class="my-head">
        </div>
        <div class="head-right">
          <div class="my-name">大v超人 &nbsp;<van-tag round type="primary" class="icon iconfont icon-dengji-A">&nbsp;特级</van-tag></div>
          <div class="my-switch">
              <div class="voice-switch">
                <van-switch :value="VoiceChecked" @input="onInputVoice" size="25px"/>
                <div class="voice-name">语音单</div>
              </div>
              <div class="random-switch">
                <van-switch :value="RandomChecked" @input="onInputRandom" size="25px"/>
                <div class="random-name">随机单</div>
              </div>
          </div>


        </div>
      </div>

      <div class="my-main">
        <div class="main-wrapper">
          <router-link to="/clerkdataedit" class="main-list"><span class="icon-left iconfont icon-wodeziliao"></span><span class="icon-name">我的资料</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
          <router-link to="/profit" class="main-list"><span class="icon-left iconfont icon-wodeshouyi"></span><span class="icon-name">我的收益</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
          <router-link to="/grade" class="main-list"><span class="icon-left iconfont icon-dengji-copy-copy-copy-copy"></span><span class="icon-name">我的等级</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>
<!--          <router-link to="/ranking" class="main-list"><span class="icon-left iconfont icon-paihang"></span><span class="icon-name">排行榜</span><span class="icon-right iconfont icon-icon-arrow-right"></span></router-link>-->
        </div>
      </div>
    </div>
    <clerk-footer></clerk-footer>
  </div>


</template>

<script>
  import ClerkFooter from "@/components/ClerkFooter";
  import Vue from 'vue';
  import { Tag, Switch,Dialog } from 'vant';

  Vue.use(Tag);
  Vue.use(Switch);
  Vue.use(Dialog);
  export default {
    name: "Clerk",
    components: {
      ClerkFooter
    },
    data: function() {
      return {
        VoiceChecked: true,
        RandomChecked: false
      }
    },
    methods: {
      onInputVoice(VoiceChecked) {
        Dialog.confirm({
          title: '提醒',
          message: '确认切语音单？',
        }).then(() => {
          this.VoiceChecked = VoiceChecked;
        });
      },
      onInputRandom(RandomChecked) {
        Dialog.confirm({
          title: '提醒',
          message: '确认切换随机单？',
        }).then(() => {
          this.RandomChecked = RandomChecked;
        });
      },
    }
  }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .my
    padding .2rem
    .my-header
      between()
      padding .3rem
      background #fff
      border-radius .1rem
      .header-left
        width 1.7rem
        right()
        .my-head
          text-align right
          width 1.7rem
          height 1.7rem
          border-radius .1rem
      .head-right
        width calc(100% - 1.7rem)
        padding 0 0 0 .3rem
        .my-name
          font-size .3rem
          color #333
          .van-tag
            font-size .12rem
            background-color $DefaultColor
            color $DefaultTextColor
        .my-switch
          display flex
          justify-content flex-start
          align-items center
          padding-top .3rem
          .voice-switch
            .voice-name
              font-size .2rem
              color #999999
              padding-top .15rem
          .random-switch
            padding-left .25rem
            .random-name
              padding-top .15rem
              font-size .2rem
              color #999999
    .my-main
      margin-top .3rem
      between()
      padding .3rem
      background #fff
      border-radius .1rem
      .main-wrapper
        width 100%
        .main-list
          between-align-items()
          padding .3rem 0
          .icon-left
            width .4rem
            color $DefaultColor
            font-size .4rem
          .icon-name
            width calc(100% - .6rem)
            padding-left .3rem
            font-size .3rem
            color #333
          .icon-right
            font-size .2rem
            width .2rem
            color #333

</style>
<style scoped>

  .van-tag{
    padding: .2em 1em
  }
  .van-switch--on{
    background-color: #CED1EF !important;
  }
  /*.van-switch{*/
  /*  height: .5rem;*/
  /*}*/
</style>
